<template>
  <div class="table-container">
    <h2 class="table-title">{{ props.title }}</h2>
    <el-table
      v-loading="loading"
      border
      :data="list.slice((page - 1) * limit, page * limit)"
      style="width: 100%"
    >
      <el-table-column :label="$t('mall.serial_number')" width="55" type="index" align="center">
        <template #default="scope">
          <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('om.BOMModel')"
        align="center"
        prop="manufacturerPn"
        :show-overflow-tooltip="true"
        width="200"
      />
      <el-table-column :label="$t('om.BOMBit')" align="center" width="120">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="350px">
            <template #default>
              <div>{{ scope.row.designator }}</div>
            </template>
            <template #reference>
              <div>{{ scope.row.designator.split(',').length }}</div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('om.Branding')"
        align="center"
        prop="manufacturer"
        :show-overflow-tooltip="true"
        :width="100"
      />
      <el-table-column
        :label="$t('om.Componentparameters')"
        align="center"
        prop="description"
        :width="200"
      >
      </el-table-column>
      <el-table-column :label="$t('om.RecommendedComponents')" align="center"  :width="300">
        <template #default="scope">
          <!-- 推荐元件 -->
          <component-column :row="scope.row" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('om.Dosage')" align="center">
        <template #default="scope">
          {{ scope.row.quantity * scope.row.smtNumber }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('om.Currentstock')" align="center" prop="stock" width="120">
        <template #default="scope">
          {{ scope.row.quantity * scope.row.smtNumber }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('coommon.operation')" width="155">
        <template #default="scope">
          <el-button
            class="operation-btn"
            size="small"
            type="warning"
            @click="addPatch(scope.row)"
            >{{ $t('mall.add_to_smt') }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <!-- 更换型号 -->
  <ChangeTypeDialog
    isUseAlternative
    v-model="changeTypeVisible"
    :title="$t('mall.material_search')"
    @selected="handleSelectedType"
  />
</template>

<script setup name="Online">
import { queryCustomerBomMatchPageList, updateManufacturerPn } from '@/server/api/bom.js';
import {
  addBomMatchList,
  confirmBomMatchId,
  deleteBomMatchList,
  updateBomExpress,
} from '@/server/api/biz.js';
import { ref, defineProps, onMounted, reactive, watch, defineEmits } from 'vue';
import ComponentColumn from '@/components/ComponentColumn/index.vue';
import ChangeTypeDialog from '@/views/quotation/components/ChangeTypeDialog.vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const route = useRoute();
const emits = defineEmits(['on-total-change', 'update-summary']);
const list = ref([]);
const loading = ref(true);
const total = ref(0);
const page = ref(1);
const limit = ref(10);
const changeTypeVisible = ref(false); // 更换型号弹窗

const data = reactive({
  rowInfo: null,
});

// 不贴参数
const queryParams = ref({
  current: 1,
  pageSize: 10,
  patchStatus: 2,
  similarity: '',
  status: '',
});

const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
  title: {
    type: String,
    default: '',
  },
});

onMounted(() => {
  getList();
});

/** 查询登录日志列表 */
function getList() {
  loading.value = true;
  queryCustomerBomMatchPageList({
    ...queryParams.value,
    ...props.params,
    bomFileId: route.query.bomFileId,
  }).then((res) => {
    if (res.code === 200) {
      list.value = res.data.records;
      total.value = Number(res.data.total);
      loading.value = false;
      // emits('update-summary', {});
    }
  });
}

// 选中型号
const handleSelectedType = (selected) => {
  updateManufacturerPn({
    id: data.rowInfo.id,
    supplierSource: selected.source,
    matchId: selected.id,
  }).then((res) => {
    if (res.code == 200) {
      getList();
      emits('resetStatisticalData');
      ElMessage.success(t('mall.modification_successful'));
    } else {
      ElMessage.error(res.message);
    }
  });
};

/**
 * 不贴
 * @param {*} index
 * @param {*} row
 */
const notPosted = (row) => {
  ElMessageBox.confirm(
    t('mall.confirm_change_to_non_smt', { name: row.manufacturerPn }),
    t('coommon.tips'),
    {
      confirmButtonText: t('smt.Define'),
      cancelButtonText: t('smt.Cancel'),
      type: 'warning',
    },
  )
    .then(() => {
      deleteBomMatchList({ bomMatchListId: row.id }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          getList();
          emits('resetStatisticalData');
          ElMessage.success(res.msg);
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch();
};

/**
 * 加入贴片
 * @param {*} index
 * @param {*} row
 */
const addPatch = (row) => {
  ElMessageBox.confirm(
    t('mall.confirm_add_to_smt', { name: row.manufacturerPn }),
    t('coommon.tips'),
    {
      confirmButtonText: t('smt.Define'),
      cancelButtonText: t('smt.Cancel'),
      type: 'warning',
    },
  )
    .then(() => {
      addBomMatchList({ bomMatchListId: row.id }).then((res) => {
        if (res.code == 200) {
          getList();
          emits('resetStatisticalData');
        }
      });
    })
    .catch();
};

/**
 * 确认
 * @param {*} index
 * @param {*} row
 */
const confirm = (row) => {
  ElMessageBox.confirm(t('mall.confirm_model', { name: row.manufacturerPn }), t('coommon.tips'), {
    confirmButtonText: t('smt.Define'),
    cancelButtonText: t('smt.Cancel'),
    type: 'warning',
  })
    .then(() => {
      confirmBomMatchId({ bomMatchListId: row.id }).then((res) => {
        if (res.code == 200) {
          getList();
          emits('resetStatisticalData');
          ElMessage.success(t('mall.confirmation_successful'));
        }
      });
    })
    .catch();
};

/**
 * 改为邮寄
 * @param {*} index
 * @param {*} row
 */
const sendPost = (row) => {
  ElMessageBox.confirm(
    t('mall.confirm_change_to_mail', { name: row.manufacturerPn }),
    t('coommon.tips'),
    {
      confirmButtonText: t('smt.Define'),
      cancelButtonText: t('smt.Cancel'),
      type: 'warning',
    },
  )
    .then(() => {
      updateBomExpress({ bomMatchListId: row.id }).then((res) => {
        if (res.code == 200) {
          getList();
          emits('resetStatisticalData');
          ElMessage.success(t('mall.successfully_changed_to_mail'));
        } else {
          ElMessage.error(res.message);
        }
      });
    })
    .catch();
};

watch(
  () => props.params,
  () => {
    getList();
  },
);

// 总数变化
watch(
  () => total.value,
  () => {
    emits('on-total-change', { type: 'NotAttached', num: total.value });
  },
);
</script>
<style scoped lang="scss">
.table-container {
  padding: 10px;
  .table-title {
    padding-bottom: 12px;
    color: #383838;
    font-size: 20px;
    font-weight: 700;
  }
}

.operation-btn {
  display: block;
  margin-bottom: 6px;
  margin-left: 0px;
}
</style>
